<template>
  <div class="app-container">
    <el-steps :active="active" align-center>
      <el-step title="基本设置"></el-step>
      <el-step title="字段设置"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <el-card v-show="active == 0" style="margin: 20px;">
      <el-row>
        <el-col :span="12" :offset="6">
          <BaseCreate ref="BaseCreate" cancelText="取消" submitText="下一步" @onCancel="handlePrev1" @onSubmit="handleNext1"></BaseCreate>
        </el-col>
      </el-row>
    </el-card>
    <div v-show="active == 1">
      <PropList ref="PropList" cancelText="上一步" submitText="下一步" :tableName="baseInfo.tableName" :columns="columns" @onCancel="handlePrev2" @onSubmit="handleNext2"></PropList>
    </div>
    <div v-show="active >= 2" style="margin: 20px; text-align: center;">
      <el-row>
        <el-col :span="12" :offset="6">
            <i class="el-icon-success" style="font-size: 84px; color: #5cb6ff;"></i>
            <h3>操作成功</h3>
            <el-button @click="handleConPrimary">继续新增主表单</el-button>
            <el-button @click="handleConForeign">继续新增子表单</el-button>
            <el-button type="primary" @click="handleEnd">结束</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { create } from '@/api/workflow/form/table'
import { queryByTableInfo } from '@/api/workflow/form/columns'
import BaseCreate from './components/BaseCreate'
import PropList from './components/PropList'

export default {
  components: {
    BaseCreate,
    PropList
  },
  data() {
    return {
      active: 0,
      baseInfo: {}, // 基础信息
      columns: [], // 字段信息
      tableId: ''
    }
  },
  watch: {
    active(val) {
      if (val === 1) {
        // this.fetchData()
      }
    }
  },
  methods: {
    handlePrev1() {
      this.$router.push({ path: '/workflow/form/index' })
    },
    handleNext1(data) {
      this.baseInfo = data
      // 验证数据库、表类型、表是否存在，如果存在则可进入下一步
      const post = {
        tableSchema: data.tableSchema,
        tableType: data.tableType,
        tableName: data.tableName
      }
      queryByTableInfo(post).then(res => {
        this.$refs.BaseCreate.btnLoading = false
        if (res.data && res.data.length) {
          this.columns = res.data
          this.active = 1
        } else {
          this.$message.warning('数据库或表名不存在')
        }
      }).catch(res => {
        this.$refs.BaseCreate.btnLoading = false
      })
    },
    handlePrev2() {
      this.active = 0
    },
    handleNext2(list) { // 提交新增，list为字段列表
      const tabInfo = {
        columns: list,
        ...this.baseInfo
      }
      create(tabInfo).then(res => {
        this.tableId = res.data
        this.$message.success('新增成功')
        this.active = 3
      })
    },
    handleConPrimary() { // 继续新增主表单
      this.$refs.BaseCreate.form.tableDef = 'PRIMARY'
      this.active = 0
    },
    handleConForeign() { // 继续新增子表单
      this.active = 0
    },
    handleEnd() {
      this.$router.push({ path: '/workflow/form/index' })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

